.sider {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 66;
	width: 240px;
	background-color: #fff;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	transition: 0.4s cubic-bezier(0.18, 0.81, 0.3, 0.89);
	.headerIcon {
		position: absolute;
		left: 240px;
		font-weight: 700;
		display: inline-block;
		width: 56px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    color: #ffffff;
    i {
    	font-size: 19px;
    }
	}

	.brandWrap {
		background-image: url('../../assets/img/brand.jpg');
		background-size: 100% 100%;
		height: 210px;
		.brand {
			height: 210px;
			padding: 40px 20px 2em;
    	background: rgba(63, 81, 181, 0.5);
    	.avatar {
    		display: block;
		    width: 80px;
		    height: 80px;
		    border: 2px solid #fff;
		    border-radius: 50%;
		    overflow: hidden;
		    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
		    img {
		    	max-width: 100%;
    			border: none;
		    }
    	}
    	.introduce {
    		margin: 1em 0 0;
    		color: #ffffff;
    		box-sizing: border-box;
    		.nickname {
    			font-size: 16px;
    			line-height: 24px;
    		}
  			.mail {
			    display: inline-block;
			    padding-top: 4px;
			    color: #c5cae9;
			    font-size: 13px;
			    text-decoration: none;
  				outline: 0;
  			}
    	}
		}
	}
	.scrollWrap {
		position: relative;
    overflow-y: auto;
    .nav {
    	margin: 0;
	    padding: 12px 0;
	    height: 300px;
	    min-height: calc(100% - 115px);
	    list-style: none;
	    line-height: 44px;
	    .navItem {
	    	display: block;
	    	padding: 0 20px;
	    	cursor: pointer;
	    	font-weight: 700;
	    	&:hover {
    			background: rgba(0, 0, 0, 0.05);
	    	}
	    }
    }
	}
}

	.hideSelf {
		transform: translateX(-300px);
	}